<template>
	<view>
		<!-- 顶部搜索区 -->
		<view
			style="background-color: #00c297;padding: 70rpx 50rpx 20rpx 50rpx;color: #fff;line-height: 80rpx;font-size: 40rpx;">
			首页
			<view
				style="color: #000000; display: flex;justify-content: center;padding: 10rpx;margin: 20rpx 0;background-color: #fff;border-radius: 10rpx;">
				<image style="width: 50rpx;height: 50rpx;margin-right: 20rpx;" src="../../static/image/sousuo.png"
					mode="aspectFill"></image>
				<input @click="toSearchpage" :disabled="true" type="text" value="" style="width: 100%;" placeholder="搜索" />
			</view>
		</view>
		<!-- 功能分类区 -->
		<view style="padding: 20rpx 50rpx;">
			<view style="display: flex;justify-content: center;">
				<image style="width: 100%;height: 300rpx;border-radius: 20rpx;margin-bottom: 30rpx;"
					src="../../static/image/4.jpg" mode="aspectFill"></image>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view v-for="(item,index) in imgList" @click="topage(item.name)"
					style="width: 25%;display: flex;flex-direction: column;align-items: center;font-size: 30rpx;">
					<image style="width: 60%;height: 70rpx;margin-bottom: 10rpx;" :src="item.src" mode="aspectFit">
					</image>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 预约功能区 -->
		<view style="border-radius: 20rpx;border: 2rpx #f1f1f2 solid;padding: 30rpx 50rpx;margin: 20rpx 0;">
			<button type="default" @click="toReservationRecycling"
				style="background-color: #00c297;color: #fff;border-radius: 50rpx;box-shadow: 0 0 30rpx #00c297;">预约上门回收</button>
			<u-notice-bar style="margin: 20rpx 0;" color="#00c297" bgColor="" :text="text1"></u-notice-bar>
			<u-steps current="0">
				<u-steps-item title="在线预约" desc="第一步"></u-steps-item>
				<u-steps-item title="免费上门" desc="第二步"></u-steps-item>
				<u-steps-item title="订单完成" desc="第三步"></u-steps-item>
				<u-steps-item title="用户福利" desc="第四步"></u-steps-item>
			</u-steps>
		</view>
		<!-- 爱心活动 -->
		<view style="padding: 20rpx 50rpx;">
			<view style="display: flex;justify-content: flex-start;margin-bottom: 20rpx;">
				<view style="width: 18rpx;height: 60rpx;background-color: #00c297;margin-right: 20rpx;"></view>
				<text style="font-size: 40rpx;line-height: 60rpx;">爱心活动</text>
			</view>
			<swiper style="height: 300rpx;border-radius: 20rpx;" :indicator-dots="true" :autoplay="true"
				:interval="3000" :duration="1000">
				<swiper-item @click="toeventDetails" v-for="(item,index) in [1,2,3,4]">
					<view class="swiper-item" style="height: 100%;border-radius: 20rpx;">
						<image style="border-radius: 20rpx;height: 100%;width: 100%;" src="../../static/image/4.jpg"
							mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: '历史文化展馆诉说红色传统',
				imgList: [{
					src: '../../static/image/fenlei.png',
					name: '旧物回收'
				}, {
					src: '../../static/image/fenzhi.png',
					name: '旧物去向'
				}, {
					src: '../../static/image/icon_dizhi.png',
					name: '附近回收机'
				}, {
					src: '../../static/image/jifenduihuan.png',
					name: '积分商城'
				}]
			}
		},
		methods: {
			// 前往搜索页
			toSearchpage(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			// 前往活动详情页
			toeventDetails(){
				uni.navigateTo({
					url:"./eventDetails"
				})
			},
			// 预约上门回收跳转
			toReservationRecycling(){
				uni.navigateTo({
					url:"reservationRecycling"
				})
			},
			topage(name) {
				switch (name) {
					case '旧物回收':
						uni.navigateTo({
							url: "./classification"
						})
						break;
					case '旧物去向':
						uni.navigateTo({
							url: "./whereabouts"
						})
						break;
					case '附近回收机':
						uni.navigateTo({
							url: "./nearby"
						})
						break;
					case '积分商城':
						uni.navigateTo({
							url: "./PointsMall"
						})
						break;
				}
			}
		}
	}
</script>

<style>

</style>